<template>
	<div class="app-container">
		<el-row class='content-container'>
			<div class="left">
				<company @choseCompany="choseCompany"></company>
			</div>
			<div class="left">
				<span class="label-titile">课程名称</span>
				<el-input v-model="reqData.productName" placeholder="请输入课程名称" style="width:200px" @keyup.enter.native="search"></el-input>
				<el-button type="primary" @click="search">搜索</el-button>	
			</div>
			
		</el-row>
		<el-row class="content-container">
			<el-table :data="list" style="width: 100%">
				<el-table-column prop="id" label="ID" align="center"></el-table-column>
				<el-table-column prop="productName" label="课程名称" align="center"></el-table-column>
				<el-table-column label="价格" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.price}}元</span>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="说明" align="left"></el-table-column>
				<!--<el-table-column prop="starttime" label="开始日期" align="center"></el-table-column>
				<el-table-column prop="endtime" label="截止日期" align="center"></el-table-column>-->
				<el-table-column label="操作" align="center" width="400px">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="lookStudy(scope.row)">查看学习情况</el-button>
						<el-button size="mini" type="primary" @click="importStudy(scope.row)">导出学习记录</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-page="reqData.currentPage" :page-count="totalPageSize" :page-sizes="[10, 20, 30, 50]" :page-size="reqData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	import company from '../../components/common/company'
	import { getCourseList} from '@/api/course'
	import { baseUrl } from '@/utils/index'
	export default {
		name:"courseList",
		components: { company},
		data() {
			
			return {
				list: [],
				totalPageSize: 0,
				totalResultSize: 0,
				reqData: {
					currentPage: 1,
					companyId:"",
					productName:"",
				},
			}
		},
		created(){
			this.getList({});
		},
		methods: {
			getList(data){
				getCourseList(data).then((res)=>{
					let entitys = res.entity;
					this.list = [...entitys.data];
					this.totalPageSize = entitys.page.totalPageSize;
					this.totalResultSize = entitys.page.totalResultSize;
				})
			},
			choseCompany(data){
				this.reqData.companyId = data;
			},
			handleSizeChange(val) {
				this.reqData["pageSize"] = val;
			 	this.reqData.currentPage = 1;
			 	this.getList(this.reqData);
			},
			handleCurrentChange(val){
				this.reqData.currentPage = val; 
		    	this.getList(this.reqData);	
				
			},
			resetCurrent(){
				this.reqData.currentPage = 1;
			},
			search(){
				this.resetCurrent();
				this.getList(this.reqData);	
			},
			lookStudy(row){
				this.$router.push({
					path:"/courseStudy/study",
					query:{
						id: row.id,
						courseName: row.courseName
					}
				})
			},
			importStudy(row){
				window.location.href = baseUrl()+"/course/learnSituationEXCEL?orderDetailId="+row.id;
			}

		},
		beforeRouteLeave(to, from, next){//学习情况导航添加课程名称
			to.meta.title = to.query.courseName;
			next();
		}
	}
</script>

<style>

</style>